
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>About MathFlow </title>

		<script language="Javascript">
		var introTitle = "What is MathFlow?";
		var introTheorem ="MathFlow is all about an idea called \"Variable Binding\".<br/>   Variable Binding allows us to maintain variables names as a user<br/>  navigates throughrelated theorems, easing the task of understanding and <br/>  an unfamiliar theorem by expressing where the variables from familiar<br/> theorems fit into this new puzzle. Click on one of the three theorems <br/> to bind your variables, then navigate to the others by clicking them.<br/>     Notice how your original variables are maintained across the definitions!";
		
		var graphTitle = "Graph";
		var graphTheorem = "A <b>Graph</b> <b class='var' id='var1'>J</b> contains a set of Vertices <b class='var' id='var2'>X</b> and a set of Edges <b class='var' id='var3'>Y</b> such <br/>that each edge in Edges connects two vertices in Vertices";
		
		var simpleGraphTitle = "Simple Graph";
		var simpleGraphTheorem = "A <b>Simple Graph</b> <b class='var' id='var4'>S</b> contains a set of Vertices <b class='var' id='var5'>N</b> and a set of edges <b class='var' id='var6'>L</b>. <br/>The graph is an acyclic, undirected, connected graph </br> such that each <br/>edge is a pair of distinct vertices";
		
		var treeTitle = "n-ary Tree";
		var treeTheorem =  "A <b>n-ary Tree</b> is a rooted <b>Graph</b>, <b class='var' id='var7'>G</b>,   for which each vertex v in a set<br/> of Vertices <b class='var' id='var8'>V</b> which is not a leaf has at most n children connected by<br/> a set of Edges <b class='var' id='var9'>E</b>"
		
		var currentTheorem = introTheorem;
		var currentTitle = introTitle;
		
		var graphBind;
		var edgeBind;
		
		var nodeBind;
		var bindingSet = false;
		
		function reset()
		{ 
			bindingSet = false;
			document.getElementById('currentTheorem').innerHTML = introTheorem;
			document.getElementById('currentTitle').innerHTML = introTitle; 
			document.getElementById('var1').innerHTML = 'J';
			document.getElementById('var2').innerHTML = 'X';
			document.getElementById('var3').innerHTML = 'Y';
			document.getElementById('var4').innerHTML = 'S';
			document.getElementById('var5').innerHTML = 'N';
			document.getElementById('var6').innerHTML = 'L';
			document.getElementById('var7').innerHTML = 'G';
			document.getElementById('var8').innerHTML = 'V';
			document.getElementById('var9').innerHTML = 'E';
		}
		
		function changeArticle(article){
			if(bindingSet == false)
			{
				// set our initial bindings
				bindingSet = true;
				switch(article)
				{
				case 1:
				  document.getElementById('currentTheorem').innerHTML = graphTheorem;
				  document.getElementById('currentTitle').innerHTML = graphTitle;
				  graphBind = document.getElementById('var1').innerHTML;
				  nodeBind = document.getElementById('var2').innerHTML;
				  edgeBind = document.getElementById('var3').innerHTML;
				  break;
				case 2:
				  document.getElementById('currentTheorem').innerHTML = simpleGraphTheorem;
				  document.getElementById('currentTitle').innerHTML = simpleGraphTitle;
				  graphBind = document.getElementById('var4').innerHTML;
				  nodeBind = document.getElementById('var5').innerHTML;
				  edgeBind = document.getElementById('var6').innerHTML;
				  break;
				case 3:
				  document.getElementById('currentTheorem').innerHTML = treeTheorem;
				  document.getElementById('currentTitle').innerHTML = treeTitle; 
				  graphBind = document.getElementById('var7').innerHTML;
				  nodeBind = document.getElementById('var8').innerHTML;
				  edgeBind = document.getElementById('var9').innerHTML; 
				break; 
				default:
				break;
				}
			}
			else 
			{
				switch(article)
				{
				case 1:
				  document.getElementById('currentTheorem').innerHTML = graphTheorem;
				   document.getElementById('currentTitle').innerHTML = graphTitle;
				  document.getElementById('var1').innerHTML = graphBind;
				  document.getElementById('var2').innerHTML = nodeBind;
				  document.getElementById('var3').innerHTML = edgeBind;
				  break;
				case 2:
				  document.getElementById('currentTheorem').innerHTML = simpleGraphTheorem;
				  document.getElementById('currentTitle').innerHTML = simpleGraphTitle;
				  document.getElementById('var4').innerHTML = graphBind;
				  document.getElementById('var5').innerHTML = nodeBind;
				  document.getElementById('var6').innerHTML = edgeBind;
				  break;
				case 3:
				  document.getElementById('currentTheorem').innerHTML = treeTheorem;
				  document.getElementById('currentTitle').innerHTML = treeTitle;
				  document.getElementById('var7').innerHTML = graphBind;
				  document.getElementById('var8').innerHTML = nodeBind;
				  document.getElementById('var9').innerHTML = edgeBind;
				break; 
				default:
				break;
				}
			}
		}
		</script>
		<!-- if we can manage to get the font images to look remotely attractive, here's the LaTex script...-->
		<script src="MathJax/MathJax.js">
		  MathJax.Hub.Config({
			extensions: ["tex2jax.js"],
			jax: ["input/TeX","output/HTML-CSS"],
			tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
		  });
		</script>

		<link rel="stylesheet" href="aboutCSS.css" type="text/css"/>
	</head>
	<body>
	<div id="container">
		<div class='theoremTitle'id='currentTitle'>What is MathFlow?</div>
		<div class='theoremBody'id='currentTheorem'> MathFlow is all about an idea called "Variable Binding".<br/>   Variable Binding allows us to maintain variables names as a user<br/>  navigates throughrelated theorems, easing the task of understanding and <br/>  an unfamiliar theorem by expressing where the variables from familiar<br/> theorems fit into this new puzzle. Click on one of the three theorems <br/> to bind your variables, then navigate to the others by clicking them.<br/>     Notice how your original variables are maintained across the definitions!</div>
		<div id="graphNode" class="nodeName" onclick='changeArticle(1)'><br /><br />Graph</div>
		<div id="simpleGraphNode"class="nodeName" onclick='changeArticle(2)'><br/>Simple<br/> Graph</p></div>
		<div id="treeNode" class="nodeName" onclick='changeArticle(3)'><br/><br/>Tree</div>
		<div id="resetNode" class="nodeName" onclick='reset()'><br/><br/>Reset</div>
		<div id="homeNode" class="nodeName"><br/><br/>Home</div>
	</div>
	</body>
</html>
